import{d as i,M as t,A as c,h as s}from"./Anchors-CRD96j4l.js";import{D as r,a as l}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const o={path:"/base/spin",name:"spin",title:"Spin 加载中"};function n(d){const e={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...d.components};return t(s,{children:[t("div",{class:"sys-ctx-main-left",children:[t(e.h1,{id:"sp-",children:[i(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:i(e.span,{className:"icon icon-link"})}),o.title]}),t(e.h2,{id:"sp-demos",children:[i(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:i(e.span,{className:"icon icon-link"})}),"代码演示 "]}),i(r,{}),i(l,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Card, Space, Spin } from "cui-solid"

export default () => {
    return <Space dir="v">
        <Card title="卡片" style={{width: '300px', height: '300px', border: '1px solid #ccc', position: 'relative'}}>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <Spin type="pulse" />
        </Card>

        <Card title="卡片" style={{width: '300px', height: '300px', border: '1px solid #ccc', position: 'relative'}}>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <Spin type="gear" />
        </Card>

        <Card title="卡片" style={{width: '300px', height: '300px', border: '1px solid #ccc', position: 'relative'}}>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <Spin type="oval" />
        </Card>
    </Space>
}`,scopes:void 0,children:t(e.p,{children:[i(e.code,{className:"sp-inline-code",children:"Spin"})," 的父组件需要设置 ",i(e.code,{className:"sp-inline-code",children:"position"})," 为 ",i(e.code,{className:"sp-inline-code",children:"relative"}),"/",i(e.code,{className:"sp-inline-code",children:"absolute"}),"/",i(e.code,{className:"sp-inline-code",children:"fixed"}),i(e.br,{}),`
`,i(e.code,{className:"sp-inline-code",children:"Spin"})," 的 ",i(e.code,{className:"sp-inline-code",children:"type"})," 支持 ",i(e.code,{className:"sp-inline-code",children:"pulse"}),"/",i(e.code,{className:"sp-inline-code",children:"gear"}),"/",i(e.code,{className:"sp-inline-code",children:"oval"})," 默认为 ",i(e.code,{className:"sp-inline-code",children:"pulse"})]})}),i(l,{id:"control",title:"可控",src:"2control.demo.tsx",code:`import { createSignal, Show } from "solid-js";
import { Button, Card, Space, Spin } from "cui-solid"

export default () => {
    const [loading, setLoading] = createSignal(true);

    return <Space dir="v">
        <Card title="卡片" style={{width: '300px', height: '300px', border: '1px solid #ccc', position: 'relative'}}>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <div>卡片内容卡片内容</div>
            <Show when={loading()}>
                <Spin title="加载中" />
            </Show>
        </Card>
        <div>
            <Button type="primary" onClick={() => {
                setLoading(!loading());
            }}>Toggle</Button>
        </div>
    </Space>
}`,scopes:void 0,children:t(e.p,{children:["可以设置 ",i(e.code,{className:"sp-inline-code",children:"title"})," 属性修改文案，默认为loading..."]})}),t(e.h2,{id:"props",children:[i(e.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:i(e.span,{className:"icon icon-link"})}),"属性 "]}),t(e.table,{className:"sp-table",children:[i(e.thead,{children:t(e.tr,{children:[i(e.th,{style:{textAlign:"left"},children:"属性"}),i(e.th,{style:{textAlign:"left"},children:"说明"}),i(e.th,{style:{textAlign:"left"},children:"类型"}),i(e.th,{style:{textAlign:"left"},children:"默认值"})]})}),t(e.tbody,{children:[t(e.tr,{children:[i(e.td,{style:{textAlign:"left"},children:"type"}),i(e.td,{style:{textAlign:"left"},children:"类型"}),i(e.td,{style:{textAlign:"left"},children:"pulse | gear"}),i(e.td,{style:{textAlign:"left"},children:"pulse"})]}),t(e.tr,{children:[i(e.td,{style:{textAlign:"left"},children:"size"}),i(e.td,{style:{textAlign:"left"},children:"大小尺寸"}),i(e.td,{style:{textAlign:"left"},children:"string"}),i(e.td,{style:{textAlign:"left"}})]}),t(e.tr,{children:[i(e.td,{style:{textAlign:"left"},children:"title"}),i(e.td,{style:{textAlign:"left"},children:"标题"}),i(e.td,{style:{textAlign:"left"},children:"string"}),i(e.td,{style:{textAlign:"left"},children:"Loading..."})]})]})]})]}),`
`,`
`,`
`,i(c,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"control",title:"可控",src:"2control.demo.tsx"},{id:"props",depth:2,title:"属性"}]})]})}function v(d={}){const{wrapper:e}=d.components||{};return e?i(e,{...d,children:i(n,{...d})}):n(d)}export{v as default,o as frontmatter};
